<template>
	<view class="pic_vote">
		<view class="cover_img">
			<view class="title_tip">
				<view class="cover">
					封面图（可以不上传）
				</view>
				<view class="tip">
					（ 宽高比：750 × 400 ）
				</view>
			</view>
			<view class="upload_img">
				<uni-file-picker 
				@select="selectCoverFileFunc($event)"
				:auto-upload="false" 
				limit="1"
				:del-icon="false" 
				disable-preview 
				file-mediatype="image" 
				:imageStyles="coverImageStyles">
					<view class="upload">
						<text class="uploadImg">&#xe727;</text>
					</view>
				</uni-file-picker>
			</view>
		</view>
		
		<view class="basic_settings">
			<view class="title_tip">
				<view class="title">
					基础设置
				</view>
			</view>
			<view class="settings">
				<view class="title">
					<input type="text"  v-model="title" placeholder="填写投票标题"  placeholder-style="color:#bababa;font-size:16px"/>
				</view>
				<view class="explanation">
					<textarea v-model="explanation" placeholder="投票说明 (非必填)" placeholder-style="color:#bababa;font-size:14px"></textarea>
				</view>
			</view>
		</view>
		
		<view class="vote_options_settings">
			<view class="title_tip">
				<view class="title">
					投票选项设置
				</view>
			</view>
			<view class="option_list">
				<view class="option_item" v-for="(item,index) in options" :key="item.id">
					<view class="option_input">
						<input type="text" v-model="item.name" placeholder="请输入图片名称" placeholder-style="color:#bababa;font-size:14px"><text class="removeOption" @click="removeOption(item.id)">&#xe618;</text>		
					</view>
					<view class="option_upload">
						<uni-file-picker
						@select="selectVoteItemFileFunc($event,index)"
						:auto-upload="false" 
						limit="1"
						:del-icon="false" 
						disable-preview 
						file-mediatype="image" 
						:imageStyles="voteItemImageStyles">
							<view class="upload">
								<text class="smallUploadImg">&#xe727;</text>
							</view>
						</uni-file-picker>
					</view>
				</view>
			</view>
			<view class="option_add" @click="addOption()">
				<text class="addOption">&#xe660;</text><text>添加选项</text>
			</view>
		</view>
		
		<view class="vote_rules_settings">
			<view class="title_tip">
				<view class="title">
					投票规则设置
				</view>
			</view>	
			<view class="rule_list">
				<!-- <view class="rule_item">
					<text>投票类型选择</text>
					<picker class="chooseOption" @change="bindVoteTypePickerChange" :range="voteTypeArray" :value="voteTypeIndex" range-key="name">
						<view >{{voteTypeArray[voteTypeIndex].name}} &#xe616;</view>
					</picker>
				</view> -->
				<!--<view class="rule_item">
					<text>票数查看权限</text>
					<picker class="chooseOption" @change="bindViewPermPickerChange" :range="viewPermArray" :value="viewPermIndex" range-key="name">
						<view >{{viewPermArray[viewPermIndex].name}} &#xe616;</view>
					</picker>
				</view>
				<view class="rule_item">
					<text>公开投票明细</text>
					<view>
						<switch style="transform:scale(0.8)" @change="switchChange"></switch>
					</view>
				</view>-->
				<view class="rule_item">
					<text>投票截止时间</text>
					<!-- <text class="chooseOption">2月17日 明天 00:00 &#xe616;</text> -->
					<view >
						<uni-datetime-picker 
							:border="false" 
							:clear-icon="false" 
							v-model="voteEndTime"
							:start="startDate"
							:end="endDate"
							></uni-datetime-picker>
					</view>
				</view>
			</view>
		</view>
		
		<!-- <view class="share_img">
			<view class="title_tip">
				<view>
					自定义分享图（非必填）
				</view>
				<view class="tip">
					（ 宽高比：750 × 600 ）
				</view>
			</view>
			<view class="upload_img">
				<uni-file-picker
				@select="selectShareFileFunc($event)"
				:auto-upload="false" 
				limit="1"
				:del-icon="false" 
				disable-preview 
				file-mediatype="image" 
				:imageStyles="shareImageStyles">
					<view class="upload">
						<text class="uploadImg">&#xe727;</text>
					</view>
				</uni-file-picker>
			</view>
		</view> -->
		
	</view>
	
	<view class="vote_btn" >
		<button type="primary" @click="submitVote">发起投票</button>
	</view>
</template>

<script>
	import {getBaseUrl, requestUtil} from "../../utils/requestUtil.js"
	import {isEmpty} from "../../utils/stringUtil.js"
	import {timeFormat} from "../../utils/dateUtil.js"
	
	export default{
		data(){
			const curDate=new Date();
			const vv=new Date(curDate.getTime()+24*60*60*1000);
			return{
				title:'',
				explanation:'',
				coverImageFileName:'',
				// shareImageFileName:'',
				coverImageStyles: {
					width:"700rpx",
					height:"400rpx",
					border:false
				},
				shareImageStyles: {
					width:"750rpx",
					height:"300rpx",
					border:false
				},
				voteItemImageStyles:{
					width:"150rpx",
					height:"120rpx",
					border:false
				},
				voteEndTime:timeFormat(vv),
				// voteTypeArray:[
				// 	{id:1,name:'单选'},
				// 	{id:2,name:'多选'}
				// ],
				viewPermArray:[
					{id:1,name:'投票后可查看票数'},
					{id:2,name:'结束后可查看票数'},
					{id:3,name:'仅仅发起人可看票数'}
				],
				// voteTypeIndex:0,
				viewPermIndex:0,
				publicVoteDetail:false,
				options:[
					{
						id:1,
						name:'',
						image:''
					},
					{
						id:2,
						name:'',
						image:''
					}
				]
			}
		},
		computed:{
			startDate(){
				return new Date();
			},
			endDate(){
				const curDate=new Date();
				const vv=new Date(curDate.getTime()+24*60*60*1000*365);
				return vv;
			}
		},
		methods:{
			bindVoteTypePickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.voteTypeIndex = e.detail.value
			},
			bindViewPermPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.viewPermIndex = e.detail.value
			},
			switchChange:function(e){
				console.log('switch1 发生 change 事件，携带值为', e.detail.value)
				this.publicVoteDetail=e.detail.value;
			},
			addOption:function(){
				var option={
					id:this.options[this.options.length-1].id+1,
					name:'',
					image:''
				}
				this.options.push(option);
			},
			removeOption:function(id){
				const index=this.options.findIndex(v=>v.id===id)
				this.options.splice(index,1);
			},
			selectCoverFileFunc:function(e){
				console.log(e.tempFilePaths[0])
				uni.uploadFile({
					header:{token:uni.getStorageSync("token")},
					url:getBaseUrl()+"/vote/uploadCoverImage",
					filePath:e.tempFilePaths[0],
					name:"coverImage",
					success: (res) => {
						let result=JSON.parse(res.data);
						if(result.code==0){
							this.coverImageFileName=result.coverImageFileName;
						}
					}
				})
			},
			// selectShareFileFunc:function(e){
			// 	console.log(e.tempFilePaths[0])
			// 	uni.uploadFile({
			// 		header:{token:uni.getStorageSync("token")},
			// 		url:getBaseUrl()+"/vote/uploadShareImage",
			// 		filePath:e.tempFilePaths[0],
			// 		name:"shareImage",
			// 		success: (res) => {
			// 			let result=JSON.parse(res.data);
			// 			if(result.code==0){
			// 				this.shareImageFileName=result.shareImageFileName;
			// 			}
			// 		}
			// 	})
			// },
			selectVoteItemFileFunc:function(e,index){
				console.log("index="+index)
				console.log(e.tempFilePaths[0])
				uni.uploadFile({
					header:{token:uni.getStorageSync("token")},
					url:getBaseUrl()+"/vote/uploadVoteItemImage",
					filePath:e.tempFilePaths[0],
					name:"voteItemImage",
					success: (res) => {
						let result=JSON.parse(res.data);
						if(result.code==0){
							this.options[index].image=result.voteItemImageFileName;
						}
					}
				})
			},
			submitVote:async function(e){
				console.log("options长度："+this.options.length)
				console.log("options："+JSON.stringify(this.options));
				// 验证
				if(isEmpty(this.title)){
					uni.showToast({
						icon:"error",
						title:"请填写投票标题"
					})
					return;
				}
				// 验证投票选项，如果有名称的，必须要上传图片
				for(var i=0;i<this.options.length;i++){
					var option=this.options[i];
					if(!isEmpty(option.name)){
						if(isEmpty(option.image)){
							console.log("请上传第"+(i+1)+"个投票选项图片")
							uni.showToast({
								icon:"error",
								title:"请上传第"+(i+1)+"个投票选项图片"
							})
							return;
						}
					}
				}
				// 投票选项片段 至少2个选项
				// console.log("xx"+JSON.stringify(this.options))
				let resultOptions=this.options.filter(function(value,index,self){  // 过滤掉名称为空的投票选项
				    console.log("value="+value.name)
					return !isEmpty(value.name)
				})
				console.log("xx"+JSON.stringify(resultOptions));
				console.log("length="+resultOptions.length)
				if(resultOptions.length<2){
					uni.showToast({
						icon:"error",
						title:"至少两个投票选项"
					})
					return;
				}
				// 提交表单
				let form={
					title:this.title,
					coverImage:this.coverImageFileName,
					explanation:this.explanation,
					// voteTypeIndex:this.voteTypeIndex,
					// viewPermIndex:this.viewPermIndex,
					// publicVoteDetail:this.publicVoteDetail,
					voteEndTime:this.voteEndTime,
					// shareImage:this.shareImageFileName,
					voteItemList:resultOptions,
					type:2
				}
				const result=await requestUtil({url:"/vote/add",data:form,method:"post"});
				if(result.code==0){
					console.log("发布成功")
					uni.showToast({
						icon:"success",
						title:"投票发起成功!"
					})
					uni.navigateTo({
						url:"/pages/createVoteList/createVoteList"
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	@import "/common/css/iconfont.css";
	.pic_vote{
		padding: 20px;
		padding-bottom: 70px;
		.cover_img{
		
			.title_tip{
				margin-left: 10rpx;
				font-size: 26rpx;
				color: gray;
				display: flex;
				justify-content: space-between;
			}
			.upload_img{
				border-radius: 5px;
				margin-top: 20rpx;
				width:100%;
				height: 360rpx;
				background-color: white;
				display: flex;
				align-items: center;
				justify-content: center;
				.upload{
					margin: 10rpx;
					background-color: #f4f5f7;
					width:90%;
					height: 80%;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}
		
		.basic_settings{
			margin-top: 20px;
			.title_tip{
				margin-left: 10rpx;
				font-size: 26rpx;
				color: gray;
				margin-bottom: 10px;
				.title{
					
				}
			}
			.settings{
				
				border-radius: 5px;
				background-color: white;
				.title{
					padding: 10px;
					input{
						font-size: 1.3rem;
						border-bottom: 1px solid #e4e4e4;
						padding-bottom: 15px;
					}
				}
				.explanation{
					padding: 10px;
					textarea{
						height: 100px;
					}
				}
			}
			
		}
		
		.vote_options_settings{
			margin-top: 20px;
			.title_tip{
				margin-left: 10rpx;
				font-size: 26rpx;
				color: gray;
				margin-bottom: 10px;
				.title{
					
				}
			}
			.option_list{
				.option_item{
					margin-top: 10px;
					border-radius: 5px;
					background-color: white;
					padding: 10px;
					.option_input{
						display: flex;
						justify-content: space-between;
					}
					.option_upload{
						margin-top: 20rpx;
						.upload{
							margin: 10rpx;
							background-color: #f4f5f7;
							width:90rpx;
							height: 90rpx;
							display: flex;
							align-items: center;
							justify-content: center;
						}
					}
				}
			}
			.option_add{
				margin-top: 10px;
				border-radius: 5px;
				background-color: white;
				padding: 10px;
				display: flex;
				color:blue;
				font-size:14px
			}
		}
		
		.vote_rules_settings{
			margin-top: 20px;
			.title_tip{
				margin-left: 10rpx;
				font-size: 26rpx;
				color: gray;
				margin-bottom: 10px;
				.title{
					
				}
			}
			.rule_list{
				border-radius: 5px;
				background-color: white;
				.rule_item{
					display: flex;
					justify-content: space-between;
					padding: 12px;
					border-bottom: 1px solid #e4e4e4;
					font-size: 28rpx;
					align-items: center;
					height: 45rpx;
				}
			}
		}
		
		
		.share_img{
		    margin-top: 20px;
			.title_tip{
				margin-left: 10rpx;
				font-size: 26rpx;
				color: gray;
				display: flex;
				justify-content: space-between;
			}
			.upload_img{
				border-radius: 5px;
				margin-top: 20rpx;
				width:100%;
				height: 8rem;
				background-color: white;
				display: flex;
				align-items: center;
				justify-content: left;
				.upload{
					margin: 10rpx;
					margin-left: 30rpx;
					background-color: #f4f5f7;
					width:30%;
					height: 80%;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}
	}
	
	.vote_btn{
		height: 120rpx;
		width: 100%;
		background-color: white;
		position: fixed;
		bottom: 0;
		border-top: 1px solid #e4e4e4;
		button{
			margin: 10px;
		}
	}
</style>